<style lang="scss" scoped>
  .refund-el-steps {
    position: relative;
    top: 125px;
  }
  .refund-refundDiff {
    position: relative;
    top: 330px;
  }
</style>
<template>
  <Portlet title="退款进度">
    <el-form label-position="left" label-width="120px">
      <el-row :gutter="15" style="position: relative">
        <el-col :span="24" style="min-height: 400px">
          <div class="refund-el-steps">
            <el-steps :active="procStatus" align-center>
              <el-step title="发起"></el-step>
              <el-step v-if="refundScheme === 2" title="仲裁"></el-step>
              <el-step title="退款"></el-step>
            </el-steps>
          </div>
          <div class="pull-right refund-refundDiff">
            <span v-if="refundDiff > 0" class="help-block">剩余
              <timeReduce :second="refundDiff || 0"></timeReduce>
              自动退款
            </span>
            <span class="help-block" v-else>已退款</span>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </Portlet>
</template>
<script>
import {dotData} from '@/utils'
import TimeReduce from '@/components/TimeReduce'
import {filterDayHours} from '@/filters'

export default {
  name: 'refundProgress',
  components: {
    TimeReduce
  },
  filters: {
    filterDayHours
  },
  props: {
    refundDetail: {
      type: Object,
      required: true
    }
  },
  computed: {
    refundScheme() {
      return dotData(this.refundDetail, 'refundScheme')
    },
    procStatus() {
      return dotData(this.refundDetail, 'procStatus')
    },
    refundArriveDate() {
      return dotData(this.refundDetail, 'refundArriveDate')
    },
    refundDiff() {
      return dotData(this.refundDetail, 'refundDiff')
    }
  }
}
</script>
